<template>
  <div>
    <!-- <h3>柱状图和饼图</h3> -->
    <!-- <div class="topBtn">
      <el-button type="primary" plain @click="list(1)">1条数据</el-button>
      <el-button type="primary" plain @click="list(5)">5条数据</el-button>
      <el-button type="primary" plain @click="list(10)">10条数据</el-button>
    </div> -->
    <!-- <div class="box" ref="box"></div> -->
    <BarAndPie2></BarAndPie2>
    <BarAndPie3></BarAndPie3>
    <BarAndPie4></BarAndPie4>
    <BarAndPie5></BarAndPie5>
    <BarAndPie6></BarAndPie6>
    <!-- <BarAndPie7></BarAndPie7> -->
    <!-- <BarAndPieTest></BarAndPieTest> -->
  </div>
</template>

<script>
import BarAndPie2 from "./barAndPie2.vue";
import BarAndPie3 from "./barAndPie3.vue";
import BarAndPie4 from "./barAndPie4.vue";
import BarAndPie5 from "./barAndPie5.vue";
import BarAndPie6 from "./barAndPie6.vue";
import BarAndPie7 from "./barAndPie7.vue";
import BarAndPieTest from "./barAndPieTest.vue";
import { Notification } from "element-ui";
const builderJson = {
  all: 10887,
  charts: {
    map: 3237,
    lines: 2164,
    bar: 7561,
    line: 7778,
    pie: 7355,
    scatter: 2405,
  },
  components: {
    geo: 2788,
    title: 9575,
    legend: 9400,
    tooltip: 9466,
    grid: 9266,
    markPoint: 3419,
    markLine: 2984,
    timeline: 2739,
    dataZoom: 2744,
    visualMap: 2466,
    toolbox: 3034,
    polar: 1945,
  },
  ie: 9743,
};
const downloadJson = {
  "echarts.min.js": 17365,
  "echarts.simple.min.js": 4079,
  "echarts.common.min.js": 6929,
  "echarts.js": 14890,
};
const themeJson = {
  "dark.js": 1594,
  "infographic.js": 925,
  "shine.js": 1608,
  "roma.js": 721,
  "macarons.js": 2179,
  "vintage.js": 1982,
};
export default {
  components: {
    BarAndPie2,
    BarAndPie3,
    BarAndPie4,
    BarAndPie5,
    BarAndPie6,
    BarAndPie7,
    BarAndPieTest,
  },
  data() {
    return {
      myChart: {},
      num: 1,
      chartsDataList: [],
      timer: null,
      index: 0,
    };
  },
  mounted() {
    let me = this;
    setTimeout(() => {
      me.init();
      this.$bus.on("resize", (val) => {
        this.myChart.resize();
      });
    }, 1200);
  },
  methods: {
    init() {
      this.getData();
      const waterMarkText = "日志视图案例";
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = canvas.height = 100;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.globalAlpha = 0.08;
      ctx.font = "20px Microsoft Yahei";
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(waterMarkText, 0, 0);
      let box = this.$refs.box;
      let myChart = this.$echarts.init(box);
      let option = {
        backgroundColor: {
          type: "pattern",
          image: canvas,
          repeat: "repeat",
        },
        tooltip: {},
        title: [
          {
            text: "在线构建",
            subtext: "总计 " + builderJson.all,
            left: "25%",
            textAlign: "center",
          },
          {
            text: "各版本下载",
            subtext:
              "总计 " +
              Object.keys(downloadJson).reduce(function (all, key) {
                return all + downloadJson[key];
              }, 0),
            left: "75%",
            textAlign: "center",
          },
          {
            text: "主题下载",
            subtext:
              "总计 " +
              Object.keys(themeJson).reduce(function (all, key) {
                return all + themeJson[key];
              }, 0),
            left: "75%",
            top: "50%",
            textAlign: "center",
          },
        ],
        grid: [
          {
            top: 50,
            width: "50%",
            bottom: "45%",
            left: 10,
            containLabel: true,
          },
          {
            top: "55%",
            width: "50%",
            bottom: 0,
            left: 10,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            max: builderJson.all,
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: Object.keys(builderJson.charts), //me.chartsDataList
            axisLabel: {
              interval: 0,
              rotate: 0,
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            type: "category",
            data: Object.keys(builderJson.components),
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            }),
          },
          {
            type: "bar",
            stack: "chart",
            silent: true,
            itemStyle: {
              color: "#eee",
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.all - builderJson.charts[key];
            }),
          },
          {
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.components[key];
            }),
          },
          {
            type: "bar",
            stack: "component",
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#eee",
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.all - builderJson.components[key];
            }),
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "25%"],
            data: Object.keys(downloadJson).map(function (key) {
              return {
                name: key.replace(".js", ""),
                value: downloadJson[key],
              };
            }),
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "75%"],
            data: Object.keys(themeJson).map(function (key) {
              return {
                name: key.replace(".js", ""),
                value: themeJson[key],
              };
            }),
          },
        ],
      };
      myChart.setOption(option, true);
      this.myChart = myChart;
    },
    //改变数据条数
    list(num = 1) {
      this.num = num;
      console.log("num", num);
      Notification({
        type: "success",
        title: "数据发生变化",
        message: `展示${num}条数据`,
      });
      this.init();
    },
    //更熟数据
    getData() {
      let num = this.num;
      let me = this; //chartsDataList
      let arr = [];
      for (let i = 0; i < num; i++) {
        Object.keys;
        let obj = {
          任务启动时间: 0,
          步骤运行时间: me.$Mock.mock("@integer(60, 10000)"),
          步骤等待时间: me.$Mock.mock("@integer(0, 100)"),
          任务结束等待时间: me.$Mock.mock("@integer(0, 100)"),
        };
        arr.push(obj);
      }

      me.chartsDataList = arr;
      console.log("me.chartsDataList", me.chartsDataList);
    },
    handleAutoLoop() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        if (this.index > 0) {
          this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.index - 1,
          });
        }
        this.myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.index,
        });
        this.index += 1;
        if (this.index >= this.myChartData.length) {
          this.index = 0;
          setTimeout(() => {
            this.myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: this.myChartData.length - 1,
            });
          }, 1000);
        }
      }, 1000);
    },
    //停止自动轮播函数
    handlePause() {
      clearInterval(this.timer);
      this.myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: this.index - 1,
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 600px;
}
.topBtn {
  display: flex;
  justify-content: center;
}
</style>
